<template>
  <view class="iphone-container">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <view class="nav-back" @click="goBack">
        <view class="back-arrow"></view>
        返回
      </view>
      <view class="nav-title">用户协议</view>
    </view>

    <!-- 协议内容 -->
    <scroll-view class="agreement-container" scroll-y>
      <view>
        <view class="agreement-title">传奇IM用户协议</view>

        <view class="agreement-text">
          欢迎您使用传奇IM软件及服务！
        </view>

        <view class="agreement-text">
          为使用传奇IM软件（以下简称"本软件"）及服务，您应当阅读并遵守《传奇IM用户协议》（以下简称"本协议"）。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的单独协议。限制、免责条款可能以加粗形式提示您注意。
        </view>

        <view class="agreement-text">
          <text class="highlight">除非您已阅读并接受本协议所有条款，否则您无权使用本软件及相关服务。</text>您的使用、注册、登录等行为即视为您已阅读并同意本协议的约束。
        </view>

        <view class="agreement-subtitle">一、协议的范围</view>

        <view class="agreement-text">
          本协议是您与传奇IM之间关于您使用传奇IM软件及服务所订立的协议。
        </view>

        <view class="agreement-text">
          "传奇IM"是指提供传奇IM软件和服务的运营主体。
        </view>

        <view class="agreement-subtitle">二、关于本服务</view>

        <view class="agreement-text">
          本服务是指传奇IM向用户提供的即时通讯工具和相关服务，包括但不限于即时消息收发、语音通话、视频通话、群组聊天、文件传输等功能。
        </view>

        <view class="agreement-subtitle">三、账号注册与安全</view>

        <view class="agreement-list">
          <view class="agreement-list-item">
            1. 在使用本服务前，您需要注册一个传奇IM账号。传奇IM账号应当使用手机号码绑定注册，请您使用尚未与传奇IM账号绑定的手机号码进行注册。
          </view>
          <view class="agreement-list-item">
            2. 您需要对您的账号安全负责，应当妥善保管您的账号及密码信息，任何通过您的账号和密码进行的操作均视为您本人的操作。
          </view>
          <view class="agreement-list-item">
            3. <text class="highlight">如发现有他人未经授权使用您的账号，应立即通知传奇IM。因黑客行为或用户的保管疏忽导致账号、密码遭他人非法使用，传奇IM不承担任何责任。</text>
          </view>
        </view>

        <view class="agreement-subtitle">四、用户个人信息保护</view>

        <view class="agreement-text">
          保护用户个人信息是传奇IM的基本原则之一。传奇IM将按照本协议及《传奇IM隐私政策》的规定收集、使用、存储和共享您的个人信息。
        </view>

        <view class="agreement-subtitle">五、用户行为规范</view>

        <view class="agreement-text">
          您在使用本服务时需遵守法律法规、社会主义制度、国家利益、公民合法权益、公共秩序、社会道德风尚和信息真实性等"七条底线"，不得利用传奇IM账号或本服务制作、复制、发布、传播如下干扰传奇IM正常运营，以及侵犯其他用户或第三方合法权益的内容：
        </view>

        <view class="agreement-list">
          <view class="agreement-list-item">1. 违反国家法律法规的内容；</view>
          <view class="agreement-list-item">2. 发布、传送、传播、储存违反国家法律法规禁止的内容；</view>
          <view class="agreement-list-item">3. 发布、传送、传播、储存侵害他人名誉权、肖像权、知识产权、商业秘密等合法权益的内容；</view>
          <view class="agreement-list-item">4. 其他违反法律法规、政策及公序良俗、干扰传奇IM正常运营或侵犯其他用户或第三方合法权益的内容。</view>
        </view>

        <view class="agreement-subtitle">六、违约处理</view>

        <view class="agreement-text">
          如果传奇IM发现或收到他人举报您违反本协议约定的，传奇IM有权不经通知随时对相关内容进行删除、屏蔽，并视行为情节对违规账号处以包括但不限于警告、限制或禁止使用部分或全部功能、服务暂停直至终止等处罚，并可公告处理结果。
        </view>

        <view class="agreement-subtitle">七、服务的变更、中断和终止</view>

        <view class="agreement-text">
          鉴于网络服务的特殊性，传奇IM有权根据业务发展情况随时变更、中断或终止部分或全部服务。如变更、中断或终止的服务属于收费服务，传奇IM将尽可能在变更、中断或终止之前事先通知您，并对您已支付但未消费的金额按比例退还。
        </view>

        <view class="agreement-subtitle">八、其他</view>

        <view class="agreement-text">
          1. 本协议所有条款的标题仅为阅读方便，本身并无实际涵义，不能作为本协议涵义解释的依据。
        </view>
        <view class="agreement-text">
          2. 本协议条款无论因何种原因部分无效或不可执行，其余条款仍有效，对双方具有约束力。
        </view>
        <view class="agreement-text">
          3. 传奇IM有权根据业务发展需要，适时修改本协议。传奇IM在修改本协议时，将于相关页面公示。如您继续使用本服务，则视为您接受修改后的协议。
        </view>

        <view class="date-info">
          更新日期：2025年05月01日
          <br />
          生效日期：2025年05月08日
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="action-bar">
      <button class="action-btn btn-decline" @click="onDecline">不同意</button>
      <button class="action-btn btn-agree" @click="onAgree">同意并继续</button>
    </view>
  </view>
</template>

<script setup>

const onAgree = () => {
  uni.showToast({
    title: '您已同意用户协议，即将返回注册页面',
    icon: 'none',
  });
  // 可以在这里写跳转逻辑，比如返回上一页
  uni.navigateBack();
};

const onDecline = () => {
  uni.showToast({
    title: '您需要同意用户协议才能继续注册',
    icon: 'none',
  });
};

const goBack = () => {
  uni.showToast({
    title: '返回上一页',
    icon: 'none',
  });
  uni.navigateBack();
};
</script>

<style scoped>
/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 基础样式 */
.iphone-container {
  width: 100%;
  height: 100vh;
  max-width: 390px;
  max-height: 844px;
  aspect-ratio: 9 / 19.5;
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 顶部导航 */
.nav-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid #f2f2f2;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-back {
  font-size: 16px;
  color: #333;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.back-arrow {
  width: 12px;
  height: 12px;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);
  margin-right: 5px;
}

.nav-title {
  font-size: 18px;
  font-weight: 500;
  flex-grow: 1;
  text-align: center;
  padding-right: 20px;
}

/* 协议内容容器 */
.agreement-container {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* 协议标题样式 */
.agreement-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.agreement-subtitle {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 25px 0 15px 0;
}

/* 协议正文样式 */
.agreement-text {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 15px;
  text-align: justify;
}

/* 协议列表样式 */
.agreement-list {
  margin: 15px 0;
  padding-left: 20px;
}

.agreement-list-item {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 10px;
  text-align: justify;
}

/* 强调文本 */
.highlight {
  color: #186ef2;
  font-weight: 500;
}

/* 底部操作栏 */
.action-bar {
  position: sticky;
  bottom: 0;
  width: 100%;
  padding: 15px 20px;
  background-color: #ffffff;
  border-top: 1px solid #f2f2f2;
  display: flex;
  justify-content: space-between;
  z-index: 10;
}

.action-btn {
  width: 48%;
  height: 44px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.btn-decline {
  background-color: #f2f2f2;
  color: #666;
}

.btn-decline:hover {
  background-color: #e0e0e0;
}

.btn-agree {
  background-color: #186ef2;
  color: white;
}

.btn-agree:hover {
  background-color: #0d5bd7;
}

/* 日期信息 */
.date-info {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin: 30px 0;
  white-space: pre-line;
}
</style>
